/* 代码整理：懒人之家 www.lanrenzhijia.com */

function $(selector){
    var method = selector.substr(0,1) == "."?"getElementsByClassName":"getElementById";
    return document[method](selector.substr(1));
}

function turn(elem){
    var cls = elem.className;
    var n = elem.id.split("_")[1];
    if(!/photo_center/.test(cls)){
        rsort(n);
        return;
    }
    if(/photo_front/.test(cls)){
        cls= cls.replace('photo_front','photo_back');
        $('.i')[n].className=$('.i')[n].className.replace(/i_current/,'i_back');
    }
    else if(/photo_back/.test(cls)){
        cls = cls.replace('photo_back','photo_front');
        $('.i')[n].className=$('.i')[n].className.replace(/i_back/,'i_current');
    }
    return elem.className = cls;
}

//遍历myData数据长度 , 写入html ;加载图片的时候 , 还顺带加上对应数量的导航:
function addMyData(){
    var template = $("#wrap").innerHTML;  //取出wrap里面的值,作为模板,  留待后面替换
    var oHtml = [] ;                   //存储要替换的内容
    var oNav  = [] ;
    for(var i = 0 ;i < myData.length;i++){
        var _html = template.replace('{{index}}',i)
                .replace('{{alt}}',myData[i].caption)
                .replace('{{img}}',myData[i].img)
                .replace('{{caption}}',myData[i].caption)
                .replace('{{desc}}' , myData[i].desc)
        oHtml.push(_html);
        oNav.push('<span id="nav_'+i+'" class="i" onclick ="turn($(\'#photo_'+i+'\'))"></span>');
    }
    //遍历创建完成之后 , 不但要把图片传禁区 , 还要把对应 的nav导航条假如:
    oHtml.push('<div class="nav" id="nav">'+oNav.join("") +'</div>');
    $("#wrap").innerHTML = oHtml.join("");
    //图片加载后调用一下随机抽取居中图片:
    rsort(random([0,myData.length-1]));
}
addMyData();       //调用函数 , 载入图片 .

//取得在特定范围内随机的值:
function random(range){
    var min = Math.min(range[0],range[1]);
    var max = Math.max(range[0],range[1]);
    var diff = max - min + 1  ;//[3,5]
    var n = Math.floor(diff*Math.random())+min;
   return n;
}

//取得左右区域图片的取值活动范围:
function range(){
    //定义json数组格式:返回对象
    var range = {
        left:{
            x:[], y:[]
        },
        right:{
            x:[], y:[]
        }
    }
    var wrap = {
        w:$("#wrap").clientWidth,
        h:$("#wrap").clientHeight
    }
    var photo = {
        w:$(".photo")[0].clientWidth,
        h:$(".photo")[0].clientHeight
    }
    range.wrap = wrap;            //向json里面添加json元素.
    range.photo = photo;

    //定义left的xy值范围 , 和right的xy范围值.
    range.left.x=[0-photo.w/2,wrap.w/2-photo.w/2];                     //定义json数组中的元素 , 用.方法.
    range.left.y=[0-photo.h/2,wrap.h-photo.w/2];

    range.right.x=[wrap.w/2-photo.w/2,wrap.w-photo.w/2];                     //定义json数组中的元素 , 用.方法.
    range.right.y=[0-photo.h/2,wrap.h-photo.w/2];

    return range;
}
//随机选取一个作为中间的特殊元素,及两边排序.
function rsort(n){
    //获取所有的photo , 准备排序
    var _photo = $(".photo") ;
    var photos =[];
    for(var i = 0 ; i<_photo.length;i++){
        _photo[i].className=_photo[i].className.replace(/\s*photo_center\s*/," ");
        _photo[i].className=_photo[i].className.replace(/\s*photo_front\s*/," ");
        _photo[i].className=_photo[i].className.replace(/\s*photo_back\s*/," ");

        _photo[i].className += " photo_front ";
        _photo[i].style.left = "";
        _photo[i].style.top = "";
        _photo[i].style['-webkit-transform'] = "rotate(360deg) scale(1.3)";

        photos.push(_photo[i]);
    }
    //定义一张随机图片居中显示:
    var  photo_center = $("#photo_"+n);
    photo_center.className += " photo_center ";

    //剔除掉居中显示图片 :
    photo_center = photos.splice(n,1);
    //定义变量存储数据值
    var ranges = range();
    var photos_left = photos.splice(0,Math.ceil(photos.length/2));
    var photos_right = photos;
    //通过随机的left和top值 , 随意排列图片:
    for(var j =0 ;j<photos_left.length;j++){
            photos_left[j].style.left = random(ranges.left.x)+"px";
            photos_left[j].style.top = random(ranges.left.y)+"px";
            photos_left[j].style["-webkit-transform"] ="rotate("+random([-150,150])+"deg) scale(1)";
    }

    for(var s =0 ;s<photos_right.length;s++){
        photos_right[s].style.left = random(ranges.right.x)+"px";
        photos_right[s].style.top = random(ranges.right.y)+"px";
        photos_right[s].style["-webkit-transform"] ="rotate("+random([-150,150])+"deg) scale(1)";
    }
    //图片排序后 , 顺带选出当前选中按钮:
    var navs = $('.i');
    for(var i = 0 ; i< navs.length;i++){
        //统一先清空:

        navs[i].className = navs[i].className.replace(/\s*i_current\s*/,'');
        navs[i].className = navs[i].className.replace(/\s*i_back\s*/,'');
    }
    navs[n].className += " i_current " ;
}